<template>


	<el-row style="left: 20px;height: 20%;">
		<el-col :span="7">
			<el-card class="box-card" style="height: 100%;background-image: linear-gradient(120deg, #409EFF, #c2e3ff)">
				<template #header>
					<div class="card-header" style="text-align: left;color: #fff;">
						<span>收入数据</span>
					</div>
				</template>
				<div class="text item" style="color: #fff;font-size: 30px;"><B>28989</B></div>
			</el-card>
		</el-col>
		<el-col :span="7" :offset="1">
			<el-card class="box-card" style="height: 100%;background-image: linear-gradient(120deg, #6cffdb, #cbfffc)">
				<template #header>
					<div class="card-header" style="color: #fff;">
						<span>支出数据</span>
					</div>
				</template>
				<div class="text item" style="color: #fff;font-size: 30px;"><B>12387</B></div>
			</el-card>
		</el-col>
		<el-col :span="7" :offset="1">
			<el-card class="box-card" style="height: 100%;background-image: linear-gradient(120deg, #ffca2b, #fffbcd)">
				<template #header>
					<div class="card-header" style="color: #fff;">
						<span>未处理消息</span>
					</div>
				</template>
				<div class="text item" style="color: #fff;font-size: 30px;"><B>3</B></div>
			</el-card>
		</el-col>
	</el-row>

	<el-row style="left: 20px;height: 50%;top: 30px;">
		<el-col :span="23">
			<el-card class="box-card" style="height: 100%;">
				<div id="EchartRef" style="width: 100%;height: 350px;"></div>
			</el-card>
		</el-col>
	</el-row>

	<el-row style="left: 20px;height: 20%;top:60px">
		<el-col :span="15">
			<el-card class="box-card" style="height: 100%;">
				<el-table :data="tableData" stripe style="width: 100%">
					<el-table-column prop="date" label="Date" width="180" />
					<el-table-column prop="name" label="Name" width="180" />
					<el-table-column prop="address" label="Address" />
				</el-table>
			</el-card>
		</el-col>
		<el-col :span="7" :offset="1">
			<el-card class="box-card" style="height: 100%;">
				<el-table :data="tableData" stripe style="width: 100%">
					<el-table-column prop="date" label="Date" width="180" />
					<el-table-column prop="name" label="Name" width="180" />
				</el-table>
			</el-card>
		</el-col>
	</el-row>


</template>

<script setup>
import {
	onMounted
} from 'vue';

import {
	ref,
	reactive
} from 'vue'

import request from '../utils/request';
import * as echarts from 'echarts'

import {
	ElMessage,
	ElMessageBox
} from 'element-plus'

const tableData = [
	{
		date: '2016-05-03',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles',
	},
	{
		date: '2016-05-02',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles',
	},
	{
		date: '2016-05-04',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles',
	}
]

onMounted(() => {
	const chart = echarts.init(document.getElementById("EchartRef"))
	var option;

	option = {
		color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
		title: {
			text: '销售情况'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			data: ['产品一', '产品二', '产品三', '产品四', '产品五']
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			boundaryGap: false,
			data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
		}],
		yAxis: [{
			type: 'value'
		}],
		series: [{
			name: '产品一',
			type: 'line',
			stack: 'Total',
			smooth: true,
			lineStyle: {
				width: 0
			},
			showSymbol: false,
			areaStyle: {
				opacity: 0.8,
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
					offset: 0,
					color: 'rgb(128, 255, 165)'
				},
				{
					offset: 1,
					color: 'rgb(1, 191, 236)'
				}
				])
			},
			emphasis: {
				focus: 'series'
			},
			data: [140, 232, 101, 264, 90, 340, 250]
		},
		{
			name: '产品二',
			type: 'line',
			stack: 'Total',
			smooth: true,
			lineStyle: {
				width: 0
			},
			showSymbol: false,
			areaStyle: {
				opacity: 0.8,
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
					offset: 0,
					color: 'rgb(0, 221, 255)'
				},
				{
					offset: 1,
					color: 'rgb(77, 119, 255)'
				}
				])
			},
			emphasis: {
				focus: 'series'
			},
			data: [120, 282, 111, 234, 220, 340, 310]
		},
		{
			name: '产品三',
			type: 'line',
			stack: 'Total',
			smooth: true,
			lineStyle: {
				width: 0
			},
			showSymbol: false,
			areaStyle: {
				opacity: 0.8,
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
					offset: 0,
					color: 'rgb(55, 162, 255)'
				},
				{
					offset: 1,
					color: 'rgb(116, 21, 219)'
				}
				])
			},
			emphasis: {
				focus: 'series'
			},
			data: [320, 132, 201, 334, 190, 130, 220]
		},
		{
			name: '产品四',
			type: 'line',
			stack: 'Total',
			smooth: true,
			lineStyle: {
				width: 0
			},
			showSymbol: false,
			areaStyle: {
				opacity: 0.8,
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
					offset: 0,
					color: 'rgb(255, 0, 135)'
				},
				{
					offset: 1,
					color: 'rgb(135, 0, 157)'
				}
				])
			},
			emphasis: {
				focus: 'series'
			},
			data: [220, 402, 231, 134, 190, 230, 120]
		},

		{
			name: '产品五',
			type: 'line',
			stack: 'Total',
			smooth: true,
			lineStyle: {
				width: 0
			},
			showSymbol: false,
			label: {
				show: true,
				position: 'top'
			},
			areaStyle: {
				opacity: 0.8,
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
					offset: 0,
					color: 'rgb(255, 191, 0)'
				},
				{
					offset: 1,
					color: 'rgb(224, 62, 76)'
				}
				])
			},
			emphasis: {
				focus: 'series'
			},
			data: [220, 302, 181, 234, 210, 290, 150]
		}
		]
	};

	chart.setOption(option)

	window.onresize = function () {
		chart.resize()
	}
})
</script>

<style>
.el-card {
	--el-card-border-color: "";
}

.el-card__header {
	text-align: left;
}

.el-card__footer {
	text-align: right;
	color: #fff;
}
</style>
